<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>百度新闻</title>
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
        padding: 0;
        overflow: scroll;
    }
    main{
        width: 100%;
        height: 2000px;
        
    }
    .top{
        float: right;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        float: left;
        color: black;
        margin: 0;
        list-style: none;
         padding: 5px; 
    }
    a{
        color: black;
        font-size: 15px;
    }
    hr{
        color: #f5f5f5;
    }
    .container{
        width: 1200px;
        margin: 0 auto;
    }
    .search{
        width: 100%;
        height: 40px;
        margin-top: 5px;
    }
    .search img{
        width: 140px;
        height: 40px;
    }
    .search li input{
        width: 600px;
        height: 40px;
        float: left
    }
    button{
        padding: 0;
        margin: 0;
        width: 100px;
        height: 40px;
        border: none;
        /* line-height: 40px; */
        float: left;
        font-size: 25px;
        background-color: #3388ff;
    }
    .search a{
        line-height: 40px;
    }
    .lab{
        width: 100%;
        height: 25px;
        float: left; 
        font-size: 12px;
        margin-left: 175px;
    }
    .nav{
        width: 100%;
        height: 40px;
        background-color: #01204f;
        text-align: center;
        position: relative; 
    }
    .nav li{
        color: white;
        font-size: 15px;
        margin: 0 5px;
        line-height: 30px;
    }
    .active{
        background-color: red;
    }
    .clear{
        clear: both;
    }
    </style>

</head>

<body>
    <main>
        <header>
            <ul class="top">
                <li><a href=""><strong>网页</strong></a></li>
                <li><a href=""><strong>新闻</strong></a></li>
                <li><a href=""><strong>贴吧</strong></a></li>
                <li><a href=""><strong>知道</strong></a></li>
                <li><a href=""><strong>音乐</strong></a></li>
                <li><a href=""><strong>图片</strong></a></li>
                <li><a href=""><strong>视频</strong></a></li>
                <li><a href=""><strong>地图</strong></a></li>
                <li><a href=""><strong>文库</strong></a></li>
                <li>|</li>
                <li><a href="">百度首页</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">百度新闻客户端</a></li>
            </ul>
            <div class="clear"></div>
            <hr>
        </header>
        <div class="container">
            <ul class="search">
                <li><img src="1.png" alt=""></li>
                <li><input type="text" id="shuru"><button type="button">百度一下</button> </li>
                <li><a href="">帮助</a></li>
                <li><a href="">高级搜索</a></li>
                <li><a href="">设置</a></li>
                <div class="clear"></div>
            </ul>
            
            <div class="lab">
                <label><input type="radio" checked >新闻全文</label>
                <label><input type="radio" >新闻标题</label>
            </div>
            <div class="clear"></div>
            </div>
        </div>
        <div class="nav">
            <div class="container">
                <ul class="hei">
                    <li class="active">首页</li>
                    <li>百家号</li>
                    <li>国内</li>
                    <li>国际</li>
                    <li>军事</li>
                    <li>社会</li>
                    <li>财经</li>
                    <li>娱乐</li>
                    <li>体育</li>
                    <li>互联网</li>
                    <li>科技</li>
                    <li>游戏</li>
                    <li>时尚</li>
                    <li>女人</li>
                    <li>汽车</li>
                    <li>个性推荐</li>
                    <li>更多</li>
                    <div class="clear"></div>
                </ul>
            </div>
        </div> 
    </main>
</body>

</html>
<script>
    var lis = document.querySelector('.nav').querySelectorAll('li');
    var lastIndex = 0;
        for(var i = 0; i < lis.length; i++){
            lis[i].index = i;
            lis[i].onmouseover = function(){
                lis[lastIndex].className = '';
                this.className = 'active';
            }
            lis[i].onmouseout = function(){
                lastIndex = this.index;  
            }
    }
    var nav = document.querySelector('.nav');
    window.onscroll = function(){
        var scrollTop = document.scrollingElement.scrollTop;
        console.log(scrollTop);
        if(scrollTop >= 125){
           nav.style.position = 'fixed';
           nav.style.top = 0;
        }
        else{
           nav.style.position = '';
        }
    }
</script>